import React, { Component } from 'react';
import App from 'layout/App.js'
import CommonModal from './../../components/CommonModal/index.jsx';
import { FormControl, Button, Table, Select, Dropdown, Tree, Icon } from 'tinper-bee';
import { getPlanTemplet,
		 InsertWorkGanttItem,
		 deleteWorkGanttItem,
		 getDownloadExcel
	   } from './workgantt.config.js';
import { vendorsFmtDate, vendorsDanger } from '../../utils/config.js';
import './index.less';
import Affix from 'bee-affix';
import moment from 'moment';
moment.locale('zh-cn');

export default class WorkGantt extends Component {
	constructor (props){
		super(props);
		this.state ={   
			tableData: [],
			showDeleteModal: false,
			chooseItemData: null,
			searchText: '',
			normalStatusArray: []
		}
	}
	componentDidMount () {
		this.init();
	}
	init = () => {
		getPlanTemplet({keyword: this.state.searchText, ieStamp: new Date().getTime()},
			res=>{
				let { exMsg, result, resultCode } = res.data;
				if (resultCode === 'busi_ex') {
					vendorsDanger({text: exMsg});
				} else {
					let data = result;
					if(data === null){
						data = [];
					}
					let normalStatusArray = data.map((item, index)=>{
						if(item.templateVOS){
							return new Array(item.templateVOS.length)
						}
					})
					this.setState({
						tableData: data,
						normalStatusArray
					});
				}

			},
			error=>{}
		)
	}
	handlerToCreatePage = () => {
		window.location.href = './customtemplateadd.html';
	}
	handlerToEditPage = (e, item) => {
		sessionStorage.setItem('pkTemplate', item.pkScheduleTemplate);
		sessionStorage.setItem('pkTemplateTime', item.creationtime);
		sessionStorage.setItem('pkTemplateName', item.creatorName);
		window.location.href = './customtemplatedit.html';
	}
	handlerDeleteItem = (item) => {
		this.setState({
			showDeleteModal: true,
			chooseItemData: item
		});
	}
	onhide =()=>{
		this.setState({
			showDeleteModal: false
		});
	}
	handlerDeleteConfirm = ()=>{
		deleteWorkGanttItem(
			this.state.chooseItemData,
			// {
			// 	pkPlanTemplet: this.state.chooseItemData.pkScheduleTemplate,
			// 	changeFlag: this.state.chooseItemData.changeFlag
			// },
			res => {
				let data = res.data;
				if(data.resultCode === 'ok'){
					this.setState({
						showDeleteModal: false
					});
					this.init();
				}else{
					vendorsDanger({text: data.exMsg});
				}
			},
			error => {

			});
	}
	handlerDeleteClose =()=>{
		this.setState({
			showDeleteModal: false
		});
	}
	handlerShowItem = (index, parentIndex) => {
		this.state.normalStatusArray[parentIndex][index] = !this.state.normalStatusArray[parentIndex][index];
		this.setState({
			normalStatusArray: this.state.normalStatusArray
		});
	}
	getColumns = () => {
		let _me = this;
		return [
		  {
		    title: "计划名称",
		    dataIndex: "name",
			key: "name",
			className: "plan-table-text-center",
		    width: '10%',
		    render(text, rec, index){
		    	return  <p className="clearfix">
		    				<span>{rec.code}</span>
		    				<a href="javascript:;" title={text}>
					    		{text}
					       </a>
		    			</p>
		    }
		  },
		  {
		    title: "前置计划",
			dataIndex: "dependPlanName",
			className: "plan-table-text-center",
		    key: "dependPlanName",
		    width: '20%'
		  },
		  {
		    title: "工期",
		    dataIndex: "planDays",
			key: "planDays",
			className: "plan-table-text-center",
		    width: '20%'
		  },
		  {
			title: "里程碑",
			className: "plan-table-text-center milestone-name-style",
			children: [
				{
				  title: "里程碑档案",
				  dataIndex: "milestoneName",
				  key: "milestoneName",
				  width: 100,
				  className: "plan-table-text-center",
				  render(text, rec, index) {
					return (
					<span>{text}</span>
					)
				  }
				},
				{
				  title: "里程碑单据",
				  dataIndex: "relatedBillTypeName",
				  key: "relatedBillTypeName",
				  width: 100,
				  className: "plan-table-text-center",
				  render(text, rec, index) {
					  return (
					  <span>{text}</span>
					  )
				  }
				}
			  ]
		},
		{
			title: "责任部门",
			dataIndex: "departmentName",
			key: "departmentName",
			width: '10%',
			className: "plan-table-text-center",
			render(text, rec, index) {
				return (
				<span>{text}</span>
				)
			}
		},
		{
			title: "负责人",
			dataIndex: "managerName",
			key: "managerName",
			width: '10%',
			className: "plan-table-text-center",
			render(text, rec, index) {
				return (
				<span>{text}</span>
				)
			}
		},
		]
	}
	handlerSaveSearchText = (e)=>{
		this.setState({
			searchText: e.target.value
		});
	}
	handlerGetSearchData = ()=>{
		this.init();
	}
	render (){
		let { tableData, normalStatusArray } = this.state;
		return (
			<App>
				<CommonModal show={this.state.showDeleteModal}
                        cancel={this.handlerDeleteClose}
                        confirm={this.handlerDeleteConfirm}
                        hide={this.onhide}
                        content={this.state.modalContext}
                        backdrop={true}
                        >
           		</CommonModal>

				<Affix>
					<div style={{background:'rgb(238, 238, 238)'}}>
						<div className="title">
							<h4>计划模板</h4>
						</div>
						<div className="header">
							<div className="header__btn--context clearfix">
								<div className="project-select clearfix">
									<p className="project-title">搜索：</p>
									<div className="search-group clearfix">
										<FormControl size="lg" placeholder={`请输入计划类型或计划模板名称`} onChange={this.handlerSaveSearchText} value={this.state.searchText}/>
										<a href="javascript:;" className="search-btn" onClick={this.handlerGetSearchData}></a>
									</div>
								</div>
								<Button colors="primary" className="project-create" onClick={this.handlerToCreatePage}>创建模板</Button>
							</div>
						</div>
					</div>

				</Affix>
				<div className="project__contain">
				{
					tableData.map((item, parentIndex)=>{
						return (<div>
									<p style={{'marginLeft': '15px'}}>{item.typeName}</p>
									{ item.templateVOS.map((item, index)=>{
										return <div className="project-item">
													<div className="project-item-header clearfix">
														<i className={ normalStatusArray[parentIndex][index] ? 'show-item' : 'close-item'} onClick={()=>{this.handlerShowItem(index, parentIndex)}}></i>
														<p className="item-title">{ index+1 }. {item.name}</p>
														<div className="project-item-btn">
															<b onClick={(e)=>{this.handlerToEditPage(e, item)}}>编辑</b>
															<b onClick={()=>{this.handlerDeleteItem(item)}}>删除</b>
														</div>
													</div>
													{
														normalStatusArray[parentIndex][index] && <div className="project-item-content">
																							<div className="project-table">
																								<Table data={item.scheduleTemplateItemVOS === null ? [] : item.scheduleTemplateItemVOS} columns={this.getColumns()}></Table>
																							</div>
																						</div>
													}
												</div>
									}) }
								</div>)
					})
				}
				</div>
			</App>
			)
	}
}